<template>
  <view class="contents">
    <u-navbar
      title="云上农夫"
      leftIconColor="#f8f8f8"
      :placeholder="true"
      bgColor="#fff"
    >
      <template #left>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <image
            @click="goback"
            class="logo"
            src="/static/zuo1.png"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
        </navigator>
      </template>
      <template #right>
        <navigator url="/pages/cart/index" open-type="switchTab">
          <image
            class="logo"
            src="/static/start1.jpg"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
          <image
            class="logo"
            src="/static/fx.png"
            style="width: 40rpx; height: 40rpx; margin-right: 20rpx"
          >
          </image>
        </navigator>
      </template>
    </u-navbar>
    <view class="hander">
      <swiper
        class="swiper"
        circular
        :indicator-dots="indicatorDots"
        :autoplay="autoplay"
        :interval="interval"
        :duration="duration"
      >
        <swiper-item>
          <view class="swiper-item">
            <image
              src="https://img1.baidu.com/it/u=1314251036,1796718287&fm=253&fmt=auto&app=138&f=JPEG"
              mode=""
              class="baner"
            ></image>
          </view>
        </swiper-item>
        <swiper-item>
          <view class="swiper-item">
            <image
              src="https://img1.baidu.com/it/u=1108061579,3883422493&fm=253&fmt=auto&app=138&f=JPEG"
              mode=""
              class="baner"
            ></image>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <view class="msg">
      <h4>新农人农庄</h4>
      <view class="msg_1">
        <u-rate
          :count="count"
          active-color="#EEA427"
          inactive-color="#b2b2b2"
          gutter="5"
          v-model="value"
        ></u-rate>
        <text>人均￥30起</text>
      </view>
      <view class="tag">
        <text class="tag1">武汉亲子市场人气榜第一</text>
      </view>
      <view class="address">
        <view class="address_left">
          <view class="address_left_1">营业中 10：00-19：30，农庄详情→</view>
          <view class="address_left_2">
            <text>充电宝</text>
            <text>空调</text>
            <text>停车场</text>
            <text>游乐园</text>
          </view>
        </view>
        <view class="address_right">
          <image src="../../static/phone.png" mode="" class="phoneimg"></image>
          <view class="">电话</view>
        </view>
      </view>
      <view class="route">
        <view class="route_left">
          <view class="route_left_1">洪山区珞喻路799号→ </view>
          <view class="route_left_2"> 距您10公里 驾车约24分钟 </view>
        </view>
        <view class="route_right">
          <image src="../../static/car.png" mode="" class="carimg"></image>
          <view class="">导航</view>
        </view>
      </view>
      <!-- 已开通 -->
      <view class="" v-if="flag">
        <view class="tablist">
          <view class="tabitem">
            <a href="#vegetableplot">共享菜地</a>
            <a href="#grouppurchase">团购</a>
            <a href="#evaluate">评价</a>
          </view>
        </view>
        <!-- 共享菜地 -->
        <view id="vegetableplot">
          <view class="vegetableplot_left">
            <view class="title">共享菜地</view>
            <view class="title_1"
              >共享菜地
              该田地可以提供全托、半托或者纯租赁三种形式的租赁形式</view
            >
          </view>
          <view class="vegetableplot_right">
            <view class="title">半年售</view>
            <view class="title_1">600份</view>
          </view>
        </view>
        <!-- 团购 -->
        <view id="grouppurchase">
          <view class="title">
            <view class="title1">团购</view>
            <view class="title2" @click="gogroupbuying">更多团购</view>
          </view>
          <view class="tabTwolist">
            <view
              class="tabTwoitem"
              v-for="(item, i) in groupbuying"
              :key="i"
              @click="grouppurchasedetail(item)"
            >
              <view class="tabTwoitem_left">
                <img :src="item.url" alt="" />
              </view>
              <view class="tabTwoitem_right">
                <view class="title">
                  <text class="title_1">{{ item.title }}</text>
                  <text class="title_2">{{ item.tag2 }}</text>
                </view>
                <view class="item_a">
                  <text class="item_a1">{{ item.tag }}</text>
                  <text class="item_a2">{{ item.time }}</text>
                  <text class="item_a3">{{ item.num }}份</text>
                </view>
                <view class="price">
                  <text class="price_1">￥{{ item.price }}</text>
                  <view class="price_2">
                    <img src="../../static/gwc.png" alt="" class="gwc" />
                  </view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 评价 -->
      <view id="evaluate">
        <view class="title">
          <view class="title1">评价</view>
          <view class="title2" @click="goreview">更多评价</view>
        </view>
        <view class="evaluatemsg">
          <view class="evaluatemsg_hander">
            <view class="evaluatemsg_left">5.0</view>
            <view class="evaluatemsg_center">
              <view class="evaluatemsg_center1">整体评分</view>
              <u-rate
                :count="count1"
                size="12"
                active-color="#EEA427"
                inactive-color="#b2b2b2"
                gutter="1"
                v-model="value1"
              ></u-rate>
            </view>
            <view class="evaluatemsg_right">
              <view class="evaluatemsg_right_item">
                <view class="a1">有机</view>
                <view class="a2">5.0</view>
              </view>
              <view class="evaluatemsg_right_item">
                <view class="a1">服务</view>
                <view class="a2">5.0</view>
              </view>
              <view class="evaluatemsg_right_item">
                <view class="a1">性价比</view>
                <view class="a2">5.0</view>
              </view>
              <view class="evaluatemsg_right_item">
                <view class="a1">环境</view>
                <view class="a2">5.0</view>
              </view>
            </view>
          </view>
          <view class="evaluatemsg_content">
            <view
              class="evaluatemsg_content_item"
              v-for="(item, i) in evaluatelist"
              :key="i"
              @click="goreviewdetal(item)"
            >
              <view class="infomsg">
                <image class="img" :src="item.url" mode=""></image>
                <view class="name">{{ item.name }}</view>
                <view class="time">{{ item.time }}</view>
              </view>
              <view class="content">{{ item.content }}</view>
              <view class="imglist">
                <image
                  class="img"
                  :src="itemimg"
                  mode=""
                  v-for="(itemimg, i) in item.img"
                  :key="i"
                ></image>
              </view>
            </view>
          </view>
        </view>
      </view>
      <!-- 未开通 -->
      <view class="recommend" v-if="!flag">
        <view class="title">
          <view class="title1">推荐</view>
          <view class="title2" @click="goreview">更多</view>
        </view>
        <view class="list">
          <view class="li">
            <image
              src="https://img95.699pic.com/xsj/0c/0r/7a.jpg%21/fh/300"
              mode=""
            ></image>
          </view>
          <view class="li">
            <image
              src="https://img95.699pic.com/xsj/0c/0r/7a.jpg%21/fh/300"
              mode=""
            ></image>
          </view>
          <view class="li">
            <image
              src="https://img95.699pic.com/xsj/0c/0r/7a.jpg%21/fh/300"
              mode=""
            ></image>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
      count: 5,
      count1: 5,
      value: 5,
      value1: 5,
      indicatorDots: true,
      autoplay: true,
      interval: 2000,
      duration: 500,
      activeItem: "tabOne",
      tabs: [
        {
          name: "tabOne",
          label: "共享菜地",
        },
        {
          name: "tabTwo",
          label: "团购",
        },
        {
          name: "tabThree",
          label: "评价",
        },
      ],
      groupbuying: [
        {
          id: 1,
          url: "https://img0.baidu.com/it/u=1512883555,827303141&fm=253&fmt=auto&app=138&f=JPEG",
          title: "[两大一小]亲子采摘",
          tag: "草莓园",
          tag2: "半年售",
          num: "650",
          price: "130",
          time: "周一到周日",
          title1: "新农人农场",
        },
      ],
      evaluatelist: [
        {
          id: 1,
          name: "李先生",
          time: "2024/4/17",
          url: "https://img0.baidu.com/it/u=2947691987,1330241285&fm=253&fmt=auto&app=138&f=JPEG",
          content: "用户评价用户评价用户评价用户评价用户评价",
          img: [
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
          ],
        },
        {
          id: 2,
          name: "王先生",
          time: "2024/4/17",
          url: "https://img0.baidu.com/it/u=2947691987,1330241285&fm=253&fmt=auto&app=138&f=JPEG",
          content: "用户评价用户评价用户评价用户评价用户评价",
          img: [
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
            "https://img0.baidu.com/it/u=3997658671,3075161792&fm=253&app=138&size=w931&n=0&f=JPEG",
          ],
        },
      ],
    };
  },
  methods: {
    goreview() {
      uni.navigateTo({
        url: "/packageB/productdetails/morereviews",
      });
    },
    grouppurchasedetail(item) {
      uni.navigateTo({
        url: "/packageB/productdetails/grouppurchasedetails?id=" + item.id,
      });
    },
    gogroupbuying() {
      uni.navigateTo({
        url: "/packageB/productdetails/moregroupbuying",
      });
    },
    goreviewdetal() {
      uni.navigateTo({
        url: "/packageB/productdetails/evaluationdetails",
      });
    },
    goback() {
      uni.navigateBack();
    },
    tabClick(item) {
      this.activeItem = item.name;
      // 触发滑动方法
    },
    changeIndicatorDots(e) {
      this.indicatorDots = !this.indicatorDots;
    },
    changeAutoplay(e) {
      this.autoplay = !this.autoplay;
    },
    intervalChange(e) {
      this.interval = e.target.value;
    },
    durationChange(e) {
      this.duration = e.target.value;
    },
  },
};
</script>

<style lang="scss" scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
  text-decoration: none;
}

page {
  background-color: #f8f8f8;
}
.contents {
  font-family: "Poppins";
}
.swiper {
  background-color: #fff;
  height: 300rpx;
}

.swiper-item {
  display: block;
  height: 300rpx;
  line-height: 300rpx;
  text-align: center;
  padding: 0rpx 20rpx;

  .baner {
    width: 100%;
    height: 100%;
    border-radius: 30rpx;
  }
}

.msg {
  padding: 20rpx 30rpx;

  h4 {
    margin-bottom: 10rpx;
  }

  .msg_1 {
    display: flex;
    align-items: center;
    font-size: 28rpx;
    margin-bottom: 20rpx;
  }

  // 标签
  .tag {
    font-size: 28rpx;
    color: #fff;
    margin-bottom: 30rpx;

    .tag1 {
      padding: 2rpx 10rpx;
      background-color: #eea427;
      border-radius: 20rpx;
    }
  }

  // 地址
  .address {
    display: flex;
    align-items: center;
    padding: 30rpx 10rpx;
    border-top: 1px solid #bbbbbb;
    border-bottom: 1px solid #bbbbbb;

    .address_left {
      flex: 1;

      .address_left_1 {
        font-size: 28rpx;
        margin-bottom: 10rpx;
      }

      .address_left_2 {
        text {
          color: #676767;
          font-size: 26rpx;
          padding: 2rpx 8rpx;
          background-color: #d8d8d8;
          border-radius: 20rpx;
          margin-right: 10rpx;
        }
      }
    }

    .address_right {
      text-align: center;
      font-size: 28rpx;
      color: #676767;

      .phoneimg {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }

  // 路线
  .route {
    display: flex;
    align-items: center;
    padding: 25rpx 10rpx;

    .route_left {
      flex: 1;

      .route_left_1 {
        font-size: 28rpx;
        color: #000;
        font-weight: 600;
      }

      .route_left_2 {
        color: #676767;
        font-size: 26rpx;
      }
    }

    .route_right {
      text-align: center;
      font-size: 28rpx;
      color: #676767;

      .carimg {
        width: 40rpx;
        height: 40rpx;
      }
    }
  }
}

.tablist {
  display: flex;
  margin-bottom: 20rpx;

  .tabitem {
    a {
      display: inline-block;
      margin-right: 20rpx;
      font-size: 32rpx;
      font-weight: 600;
      color: #000;
    }
  }
}

#vegetableplot {
  padding: 20rpx 20rpx 30rpx 20rpx;
  background-color: #fff;
  border-radius: 20rpx;
  display: flex;
  justify-content: space-between;
  margin-bottom: 30rpx;

  .vegetableplot_left {
    width: 80%;

    // margin-right: 30rpx;
    .title {
      font-size: 32rpx;
      color: #000;
      margin-bottom: 5rpx;
    }

    .title_1 {
      color: #adadad;
      font-size: 26rpx;
    }
  }

  .vegetableplot_right {
    text-align: center;

    .title {
      font-size: 30rpx;
      color: #000;
    }

    .title_1 {
      color: #8d8683;
      font-size: 28rpx;
    }
  }
}

// 团购
#grouppurchase {
  margin-bottom: 30rpx;

  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;

    .title1 {
      font-size: 32rpx;
      font-weight: 600;
    }

    .title2 {
      font-size: 30rpx;
      color: #676767;
    }
  }
}

.tabTwolist {
}

.tabTwoitem {
  display: flex;
  height: 150rpx;
  padding: 15rpx;
  margin-bottom: 15rpx;
  background-color: #fff;
  border-radius: 20rpx;

  .tabTwoitem_left {
    width: 200rpx;
    margin-right: 10rpx;
    border-radius: 10rpx;
    overflow: hidden;

    img {
      width: 100%;
      height: 100%;
    }
  }

  .tabTwoitem_right {
    flex: 1;

    .title {
      display: flex;
      font-size: 28rpx;
      color: #3d3d3d;
      margin-bottom: 10rpx;
      padding-right: 10rpx;

      .title_1 {
        flex: 1;
      }
    }

    .title1 {
      font-size: 28rpx;
      color: #3d3d3d;
    }

    .item_a {
      display: flex;
      align-items: center;
      padding-right: 10rpx;
      margin-bottom: 20rpx;

      .item_a1 {
        font-size: 22rpx;
        color: #adadad;
        display: inline-block;
        margin-right: 20rpx;
      }

      .item_a2 {
        font-size: 22rpx;
        color: #adadad;
        flex: 1;
      }

      .item_a3 {
        font-size: 22rpx;
        color: #8d8683;
      }
    }

    .price {
      display: flex;
      align-items: center;
      padding-right: 10rpx;

      .price_1 {
        font-size: 28rpx;
        color: #3d3d3d;
        flex: 1;
      }

      .price_2 {
        .gwc {
          width: 50rpx;
          height: 50rpx;
        }
      }
    }
  }
}

// 评价
#evaluate {
  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;

    .title1 {
      font-size: 32rpx;
      font-weight: 600;
    }

    .title2 {
      font-size: 30rpx;
      color: #676767;
    }
  }
}

.recommend {
  padding: 20rpx;

  .title {
    display: flex;
    justify-content: space-between;
    margin-bottom: 15rpx;

    .title1 {
      font-size: 32rpx;
      font-weight: 600;
    }

    .title2 {
      font-size: 30rpx;
      color: #676767;
    }
  }

  .list {
    background-color: #fff;
    padding: 20rpx;
    display: flex;
    flex-wrap: wrap;
    border-radius: 20rpx;

    .li:nth-child(2n) {
      margin-left: 5%;
    }

    .li {
      width: 45%;
      height: 260rpx;

      margin-bottom: 30rpx;

      image {
        width: 100%;
        height: 260rpx;
        border-radius: 10rpx;
      }
    }
  }
}

.evaluatemsg {
  width: 100%;
  background-color: #fff;
  border-radius: 30rpx;
  padding-bottom: 20rpx;

  .evaluatemsg_hander {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20rpx;

    .evaluatemsg_left {
      font-size: 50rpx;
      font-weight: 600;
      color: #eea427;
      margin-right: 20rpx;
    }

    .evaluatemsg_center {
      text-align: center;
      margin-right: 30rpx;

      .evaluatemsg_center1 {
        font-weight: 600;
        font-size: 34rpx;
      }
    }

    .evaluatemsg_right {
      display: flex;
      align-items: center;

      .evaluatemsg_right_item {
        text-align: center;
        margin-right: 20rpx;

        .a1 {
          font-size: 30rpx;
        }

        .a2 {
          font-size: 30rpx;
          font-weight: 600;
          color: #eea427;
        }
      }
    }
  }

  .evaluatemsg_content_item {
    padding: 10rpx 30rpx;

    .infomsg {
      display: flex;
      align-items: center;
      margin-bottom: 20rpx;

      .img {
        width: 80rpx;
        height: 80rpx;
        border-radius: 50%;
        margin-right: 20rpx;
      }

      .name {
        font-size: 28rpx;
        flex: 1;
      }

      .time {
        font-size: 28rpx;
        color: #676767;
      }
    }

    .content {
      font-size: 28rpx;
      color: #676767;
      margin-bottom: 20rpx;
    }

    .imglist {
      display: flex;

      .img {
        width: 140rpx;
        height: 140rpx;
        margin-left: 10rpx;
        border-radius: 10rpx;
      }
    }
  }
}
</style>